import orderHeader from './orderHeader.scss'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Button, Form, Input, Select, Col, Row, DatePicker, Space } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

//日期选择器，国际化
const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';

const traverse = (arr) => {

    let selectList = []
    arr.map((v, i) => selectList.push(<Select.Option value={v} key={i}>{v}</Select.Option>))
    return selectList
}

const preciseClass = [
    "用户ID", '用户姓名', '手机号', '用户微信号'
]
const btnList = [
    { status: 0, name: '今日' },
    { status: 1, name: '昨日' },
    { status: 2, name: '最近七天' },
    { status: 3, name: '最近一月' },
]
const btnList2 = [
    { status: 0, name: '不限' },
    { status: 1, name: '普通' },
    { status: 2, name: '金卡' },
    { status: 3, name: '银卡' },
    { status: 4, name: '白金' },
    { status: 5, name: '钛金' },
]
const btnList3 = [
    { status: 0, name: '不限' },
    { status: 1, name: '标签一' },
    { status: 2, name: '标签二' },
    { status: 3, name: '标签三' },
    { status: 4, name: '标签四' },
    { status: 5, name: '标签五' },
]

function OrderHeader() {
    const [isTopBtn, setIsTopBtn] = useState(0)
    const clickTopBtn = (value) => {
        setIsTopBtn(value)
    }
    const btnListRender = (arr) => {
        let list = []
        arr.map((v, i) => list.push(<Button type={v.status === isTopBtn ? 'link' : 'text'} key={i} onClick={() => { clickTopBtn(v.status) }}>{v.name}</Button>))
        return list
    }

    const [isTopBtn2, setIsTopBtn2] = useState(0)
    const clickTopBtn2 = (value) => {
        setIsTopBtn2(value)
    }
    const btnListRender2 = (arr) => {
        let list = []
        arr.map((v, i) => list.push(<Button type={v.status === isTopBtn2 ? 'link' : 'text'} key={i} onClick={() => { clickTopBtn2(v.status) }}>{v.name}</Button>))
        return list
    }

    const [isTopBtn3, setIsTopBtn3] = useState(0)
    const clickTopBtn3 = (value) => {
        setIsTopBtn3(value)
    }
    const btnListRender3 = (arr) => {
        let list = []
        arr.map((v, i) => list.push(<Button type={v.status === isTopBtn3 ? 'link' : 'text'} key={i} onClick={() => { clickTopBtn3(v.status) }}>{v.name}</Button>))
        return list
    }
    //表头查询收起状态
    const [packUp, setPackUp] = useState(false)

    const [searchForm] = Form.useForm();

    const onFinish = () => {

        console.log(searchForm.getFieldsValue());
    };


    // 收起
    const clickPackUp = () => {
        let boolean = packUp
        console.log(222, boolean);

        setPackUp(!boolean)
    }

    return <div className='order' style={orderHeader.order} >
        <div className='header'>

            <Form
                initialValues={{
                    size: 'large',
                }}
                colon={false}
                form={searchForm}
                name="control-hooks"
                size={'large'}
            >
                <Row className='' gutter={40}>
                    <Col span={8}>
                        <Form.Item
                            labelCol={{ offset: 1 }}
                            name="type"
                            label="会员等级"

                        >
                            <Space>

                                {btnListRender2(btnList2)}
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={40}>
                    <Col span={8}>
                        <Form.Item name='date' label="注册日期" labelCol={{ offset: 1 }}>
                            <RangePicker locale={locale}
                                format={dateFormat}
                            />
                        </Form.Item>
                    </Col>
                    <Col className='btns'>
                        <Space>

                            {btnListRender(btnList)}
                        </Space>
                    </Col>
                </Row>
                <div style={{ display: packUp ? 'block' : 'none' }} >
                    <Row className='' gutter={40} >
                        <Col span={8}>
                            <Form.Item
                                labelCol={{ offset: 1 }}
                                name="courier"
                                label="会员标签"

                            >
                                <Space>

                                    {btnListRender3(btnList3)}
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row className='' gutter={20} >
                        <Col span={6}>
                            <Form.Item
                                labelCol={{ offset: 1 }}
                                name="precise"
                                label="精准查询"

                            >
                                <Select>
                                    {traverse(preciseClass)}
                                </Select>

                            </Form.Item>

                        </Col>

                        <Col span={8}>
                            <Form.Item
                                labelCol={{ offset: 1 }}
                                name="context"
                            >
                                <Input placeholder='请输入...' />

                            </Form.Item>

                        </Col>
                    </Row>
                </div>


            </Form>
            <div className='abs-btns'>
                <Space>
                    <Button type="primary" size={'large'} onClick={onFinish}>查询</Button>
                    <Button size={'large'}>重置</Button>
                    <Button type="link" icon={packUp ? <UpOutlined /> : <DownOutlined />} size={'large'} onClick={clickPackUp}>{packUp === false ? '展开' : '收起'}</Button>
                </Space>

            </div>
        </div>

    </div >
}
export default OrderHeader